<template>
	<div class="goods-details table-theme" v-if="goodsInfo" style="flex: 1;">
		<head-back-title title="商品详情" v-if="!source"></head-back-title>
		<el-card>
			<el-form :model="goodsInfo" :rules="goodsRules" ref="goodsInfo" label-width="120px">
				<div class="goods-info">
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="商品名称:" prop="">
								<el-input :disabled="disabled" v-model="goodsInfo.goods_name" placeholder="请输入商品名称"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="商品库存:" prop="">
								<el-input :disabled="disabled" v-model="goodsInfo.stock" placeholder="请输入内容"></el-input>
							</el-form-item>
						</el-col>
						<!-- <el-col :span="6" v-if="admin_id == 3 || admin_type == 1">
							<el-form-item label="出厂价格:" prop="">
								<el-input :disabled="disabled" v-model="goodsInfo.factory_price" placeholder="请输入内容"></el-input>
							</el-form-item>
						</el-col> -->
						<!-- <el-col :span="6">
							<el-form-item label="运费:" prop="">
								<el-input :disabled="disabled" v-model="goodsInfo.parameter.express_price" placeholder="请输入运费"></el-input>
							</el-form-item>
						</el-col> -->
						<el-col :span="6" v-if="is_subsidiary_corporation">
							<el-form-item label="物流:" prop="">
								<el-select :disabled="disabled" v-model="goodsInfo.parameter.express_id" placeholder="请选择">
									<el-option value="1" label="买家承当运费"></el-option>
									<el-option value="2" label="卖家承担运费"></el-option>
									<el-option value="3" label="包邮"></el-option>
									<el-option value="4" label="申通快递"></el-option>
									<el-option value="5" label="顺丰速递"></el-option>
									<el-option value="6" label="圆通快递"></el-option>
									<el-option value="7" label="韵达快递"></el-option>
									<el-option value="8" label="百世汇通"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<!-- <el-col :span="6">
							<el-form-item label="工厂货号:" prop="">
								<el-input :disabled="disabled" v-model="goodsInfo.lining_sn" placeholder="请输入内容"></el-input>
							</el-form-item>
						</el-col> -->
						<el-col :span="6">
							<el-form-item label="商品编号:" prop="">
								<el-input :disabled="disabled" v-model="goodsInfo.goods_sn" placeholder="请输入内容"></el-input>
							</el-form-item>
						</el-col>
						<!-- <el-col :span="6">
							<el-form-item label="零售价:" prop="">
								<el-input :disabled="disabled" v-model="goodsInfo.retail_price" placeholder="请输入内容"></el-input>
							</el-form-item>
						</el-col> -->
						<el-col :span="6">
							<el-form-item label="商品产地:" prop="">
								<el-input :disabled="disabled" v-model="goodsInfo.lining_address" placeholder="请输入内容"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="风格分类:" prop="">
								<el-select :disabled="disabled" v-model="goodsInfo.style_id" placeholder="请选择">
									<el-option v-for="item in StyleList" :key="item.style_id" :label="item.style_name" :value="item.style_id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="空间分类:" prop="">
								<el-select :disabled="disabled" v-model="goodsInfo.space_id" placeholder="请选择">
									<el-option v-for="item in SpaceList" :key="item.space_id" :label="item.space_name" :value="item.space_id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="品类分类:" prop="">
								<el-select :disabled="disabled" v-model="goodsInfo.class_list" multiple placeholder="请选择">
									<el-option v-for="item in ClassList" :key="item.class_id" :label="item.class_name" :value="item.class_id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="材质:" prop="">
								<el-select :disabled="disabled" v-model="goodsInfo.parameter.texture_id" placeholder="请选择">
									<el-option v-for="item in TextureList" :key="item.texture_id" :label="item.texture_name" :value="item.texture_id"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="填充物:" prop="">
								<el-select :disabled="disabled" v-model="goodsInfo.parameter.filler_id" placeholder="请选择">
									<el-option value="1" label="高密度海绵"></el-option>
									<el-option value="2" label="公子棉"></el-option>
									<el-option value="3" label="乳胶"></el-option>
									<el-option value="4" label="羽绒"></el-option>
									<el-option value="5" label="弹簧包"></el-option>
									<el-option value="6" label="太空棉"></el-option>
									<el-option value="7" label="其他"></el-option>
									<el-option value="8" label="无"></el-option>
									<el-option value="9" label="海绵+羽绒"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="工艺:" prop="">
								<el-select :disabled="disabled" v-model="goodsInfo.parameter.craft_id" placeholder="请选择">
									<el-option value="1" label="手工雕刻工艺"></el-option>
									<el-option value="3" label="钢琴烤漆工艺"></el-option>
									<el-option value="4" label="复古铜钉工艺"></el-option>
									<el-option value="5" label="水晶拉扣工艺"></el-option>
									<el-option value="6" label="仿古做旧工艺"></el-option>
									<el-option value="7" label="皮拉扣工艺"></el-option>
									<el-option value="8" label="不锈钢拉丝工艺"></el-option>
									<el-option value="9" label="不锈钢镀金工艺"></el-option>
									<el-option value="10" label="喷金工艺"></el-option>
									<el-option value="11" label="描金工艺"></el-option>
									<el-option value="12" label="描银工艺"></el-option>
									<el-option value="13" label="拼花工艺"></el-option>
									<el-option value="14" label="间棉工艺"></el-option>
									<el-option value="15" label="其他"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="包装件数:" prop="">
								<el-select :disabled="disabled" v-model="goodsInfo.parameter.pack_id" placeholder="请选择">
									<el-option value="1" label="1件"></el-option>
									<el-option value="2" label="2件"></el-option>
									<el-option value="3" label="3件"></el-option>
									<el-option value="4" label="4件"></el-option>
									<el-option value="5" label="5件"></el-option>
									<el-option value="6" label="6件"></el-option>
									<el-option value="7" label="7件"></el-option>
									<el-option value="8" label="8件"></el-option>
									<el-option value="9" label="9件"></el-option>
									<el-option value="10" label="10件"></el-option>
									<el-option value="11" label="两件一包"></el-option>
									<el-option value="12" label="三件一包"></el-option>
									<el-option value="13" label="四件一包"></el-option>
									<el-option value="14" label="五件一包"></el-option>
									<el-option value="15" label="11件"></el-option>
									<el-option value="16" label="12件"></el-option>
									<el-option value="17" label="13件"></el-option>
									<el-option value="18" label="14件"></el-option>
									<el-option value="19" label="15件"></el-option>
									<el-option value="20" label="16件"></el-option>
									<el-option value="21" label="17件"></el-option>
									<el-option value="22" label="18件"></el-option>
									<el-option value="23" label="19件"></el-option>
									<el-option value="24" label="20件"></el-option>
									<el-option value="25" label="21件"></el-option>
									<el-option value="26" label="22件"></el-option>
									<el-option value="27" label="23件"></el-option>
									<el-option value="28" label="24件"></el-option>
									<el-option value="29" label="25件"></el-option>
									<el-option value="30" label="26件"></el-option>
									<el-option value="31" label="27件"></el-option>
									<el-option value="32" label="28件"></el-option>
									<el-option value="33" label="29件"></el-option>
									<el-option value="34" label="30件"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="包装体积:" prop="">
								<el-input :disabled="disabled" v-model="goodsInfo.parameter.bulk" placeholder="请输入内容"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="服务:" prop="">
								<el-select :disabled="disabled" v-model="goodsInfo.parameter.serve_id" placeholder="请选择">
									<el-option value="1" label="包送、包安装"></el-option>
									<el-option value="2" label="包送"></el-option>
									<el-option value="3" label="包安装"></el-option>
									<el-option value="4" label="无"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="6">
							<el-form-item label="货期:" prop="">
								<el-select :disabled="disabled" v-model="goodsInfo.parameter.send_id" placeholder="请选择">
									<el-option value="1" label="10天"></el-option>
									<el-option value="2" label="15天"></el-option>
									<el-option value="3" label="20天"></el-option>
									<el-option value="4" label="25天"></el-option>
									<el-option value="5" label="30天"></el-option>
									<el-option value="6" label="35天"></el-option>
									<el-option value="7" label="40天"></el-option>
									<el-option value="8" label="45天"></el-option>
									<el-option value="9" label="50天"></el-option>
									<el-option value="10" label="55天"></el-option>
									<el-option value="11" label="60天"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
						<!-- <el-col :span="6" v-if="!is_subsidiary_corporation">
							<el-form-item label="是否展示:" prop="">
								<el-select :disabled="disabled" v-model="goodsInfo.is_sale" placeholder="请选择">
									<el-option value="1" label="商品（可展示）"></el-option>
									<el-option value="2" label="套餐单品（不可展示）"></el-option>
								</el-select>
							</el-form-item>
						</el-col> -->
						<el-col :span="6">
							<el-form-item label="安装方式:" prop="">
								<el-select :disabled="disabled" v-model="goodsInfo.parameter.install_id" placeholder="请选择">
									<el-option value="1" label="整装"></el-option>
									<el-option value="2" label="组装"></el-option>
								</el-select>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<!-- <el-col :span="6" v-if="!is_subsidiary_corporation">
							<el-form-item label="物流:" prop="">
								<el-select :disabled="disabled" v-model="goodsInfo.parameter.express_id" placeholder="请选择">
									<el-option value="1" label="买家承当运费"></el-option>
									<el-option value="2" label="卖家承担运费"></el-option>
									<el-option value="3" label="包邮"></el-option>
									<el-option value="4" label="申通快递"></el-option>
									<el-option value="5" label="顺丰速递"></el-option>
									<el-option value="6" label="圆通快递"></el-option>
									<el-option value="7" label="韵达快递"></el-option>
									<el-option value="8" label="百世汇通"></el-option>
								</el-select>
							</el-form-item>
						</el-col> -->
						<el-col :span="6" v-if="!is_subsidiary_corporation">
							<el-form-item label="划线价:" prop="">
								<el-input :disabled="disabled" v-model="goodsInfo.recommend_good" placeholder="请输入内容"></el-input>
							</el-form-item>
						</el-col>
						<!-- <el-col :span="6" v-if="!is_subsidiary_corporation">
							<el-form-item label="推荐商品:" prop="">
								<el-input :disabled="disabled" v-model="goodsInfo.recommend_good" placeholder="请输入推荐商品编号..."></el-input>
							</el-form-item>
						</el-col> -->
					</el-row>
					<el-row :gutter="20">
						<!-- <el-col :span="6" v-if="!is_subsidiary_corporation">
							<el-form-item label="使用平台" prop="platform_type" >
								<el-select v-model="goodsInfo.platform_type" placeholder="请选择平台">
								  <el-option v-for="item in platformList" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</el-form-item>
						</el-col> -->
						<el-col :span="6" v-if="goodsInfo.times_limit">
							<el-form-item label="限制购买数量:" prop="">
								<el-input v-model="goodsInfo.times_limit" placeholder="请输入数量"></el-input>
							</el-form-item>
						</el-col>
						<el-col :span="6" v-if="goodsInfo.satisfy_money">
							<el-form-item label="最低的活动金额:" prop="">
								<el-input v-model="goodsInfo.satisfy_money" placeholder="请输入金额"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="14">
							<el-form-item label="产品包含:">
								<el-input :disabled="disabled" type="text" v-model="goodsInfo.parameter.contain"></el-input>
							</el-form-item>
						</el-col>
					</el-row>
					<el-row :gutter="20">
						<el-col :span="14">
							<el-form-item label="商品简介:" prop="">
								<el-input :disabled="disabled" type="textarea" :rows="4" placeholder="请输入内容" v-model="goodsInfo.parameter.brief"></el-input>
							</el-form-item>
						</el-col>
					</el-row>

					<el-table :data="goodsInfo.sku_lists" border class="factory-table" default-expand-all>
						<el-table-column type="expand" v-if="admin_id!=2">
							<template slot-scope="props">
								<!-- {{props.row}} -->
								<el-table :data="props.row.factory_sku_list" border size="small">
									<el-table-column label="工厂ID" prop="factory_id" align="center"></el-table-column>
									<el-table-column label="工厂名称" prop="factory_name" align="center"></el-table-column>
									<el-table-column label="工厂货号" prop="sku_lining_sn" align="center"></el-table-column>
									<!-- <el-table-column label="出厂价" prop="factory_price" align="center"></el-table-column> -->
								</el-table>
							</template>
						</el-table-column>
						<el-table-column label="ID" align="center" prop="sku_id" width="80"></el-table-column>
						<el-table-column label="sku款号" align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.sku_sn" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column :label="goodsInfo.parameter.name_size" align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.size" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column :label="goodsInfo.parameter.name_lining" align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.lining" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column :label="goodsInfo.parameter.name_color" align="center" width="120">
							<template slot-scope="scope">
								<el-input v-model="scope.row.color" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="品类分类" align="center" width="120" >
							<template slot-scope="scope">
								<el-select v-model="scope.row.class_id" placeholder="请选择">
									<el-option
										v-for="item in ClassList"
										:key="item.class_id"
										:label="item.class_name"
										:value="item.class_id"
									></el-option>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column label="图片" align="center" width="80">
							<template slot-scope="scope">
								<ImgPopover :src="scope.row.img"></ImgPopover>
							</template>
						</el-table-column>
						<el-table-column label="出厂价" width="90" align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.factory_price" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<!-- <el-table-column label="自营价" width="90" align="center" v-if="admin_type == 2 || admin_type == 1">
							<template slot-scope="scope">
								<el-input v-model="scope.row.self_price" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column> -->
						<!-- <el-table-column label="划线零售价" align="center" width="90" v-if="!is_subsidiary_corporation && admin_id!=3">
							<template slot-scope="scope">
								<el-input
								v-model="scope.row.market_price"
								:disabled="scope.row.market_price == 0"
								placeholder="请输入内容"
								></el-input>
							</template>
						</el-table-column> -->
						<el-table-column label="零售价" width="90" align="center" v-if="admin_type == 2 || admin_type == 1">
							<template slot-scope="scope">
								<el-input v-model="scope.row.retail_price" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<!-- <el-table-column label="我家更美零售价" align="center" width="90" v-if="!is_subsidiary_corporation && admin_id!=3 && admin_id!=2">
							<template slot-scope="scope">
								<el-input
								v-model="scope.row.wjgm_retail_price"
								placeholder="请输入内容"
								></el-input>
							</template>
						</el-table-column> -->
						<!-- <el-table-column label="天华零售价" align="center" width="90" v-if="!is_subsidiary_corporation && admin_id!=3 && admin_id!=2">
							<template slot-scope="scope">
								<el-input
								v-model="scope.row.th_retail_price"
								placeholder="请输入内容"
								></el-input>
							</template>
						</el-table-column> -->
						 <el-table-column label="活动价" align="center" width="90" v-if="!is_subsidiary_corporation && admin_id!=3">
							<template slot-scope="scope">
								<el-input
								v-model="scope.row.activity_price"
								placeholder="请输入内容"
								></el-input>
							</template>
						</el-table-column>
						<el-table-column label="保险" align="center" width="100">
							<template slot-scope="scope">
								<el-switch v-model="scope.row.is_insure" :active-value="1" :inactive-value="0"></el-switch>
							</template>
						</el-table-column>
						 <!-- <el-table-column label="运费险" align="center" prop="is_insure">
							<template slot-scope="scope">
								<el-select v-model="scope.row.is_insure" placeholder="请选择">
									<el-option v-for="item in insureList" :key="item.value" :label="item.label" :value="item.value"></el-option>
								</el-select>
							</template>
						</el-table-column> -->
						<el-table-column label="包件" align="center">
							<template slot-scope="scope">
								<el-select v-model="scope.row.sku_pack_id" placeholder="请选择">
									<el-option
										v-for="(data, index) in packList"
										:key="index"
										:label="data.pack_name"
										:value="data.pack_id"
									></el-option>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column label="体积" align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.bulk" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="起售量" align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.coefficient_num" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<el-table-column label="是否套餐" align="center" v-if="admin_id!=3">
							<template slot-scope="scope">
								<el-input v-model="scope.row.is_group" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column>
						<!-- <el-table-column label="库存" align="center">
							<template slot-scope="scope">
								<el-input v-model="scope.row.sku_num" placeholder="请输入内容"></el-input>
							</template>
						</el-table-column> -->
						<el-table-column label="操作" align="center" width="200" fixed="right">
							<template slot-scope="scope">
								<el-button type="success" size="mini" @click="changPrice(scope.row)" v-if="admin_id==2">改价</el-button>
								<template v-if="admin_id!=3">
									<el-button type="success" size="mini" @click="addComment(scope.row.goods_id,scope.row.sku_id)">去评论</el-button>
									<el-button type="success" size="mini" @click="priceTag(scope.row)">价格标签</el-button>
								</template>
								<el-button style="margin-top: 5px;" type="success" size="mini" @click="addCart(scope.row.goods_id,scope.row.sku_id)"
								 v-if="admin_type == 1">加购物车</el-button>
								<!-- <el-button type="success" size="mini" @click="purchaseF(scope.row)">申请采购</el-button> -->
							</template>
						</el-table-column>
					</el-table>
					<div class="model-view" v-if="!!goodsInfo.template_list" style="margin-top: 20px">
						<p class="title" style="font-size: 20px;">模型</p>
						<div class="image-content">
							<el-form-item label="模型:">
								<el-upload disabled ref="upload" action="fakeaction" :http-request=" function(res) { return upload(res); } "
									multipleaccept="image/*" :show-file-list="false" v-for="item in goodsInfo.template_list" :key="item"> <img :src="require('@/assets/image/file.jpg')"
										width="100%" />
								</el-upload>
							</el-form-item>
						</div>
					</div>
					<div class="goods-image">
						<p class="title" style="font-size: 20px;" :style="{marginTop: admin_id==2?'20px':'0'}">商品图片</p>
						<div class="image-content">
							<el-row :gutter="20">
								<el-col :span="6">
									<el-form-item label="主图:" prop="" class="main-image">
										<el-upload disabled ref="upload" action="fakeaction" :http-request=" function(res) { return upload(res); } "
										 multipleaccept="image/*" :show-file-list="false"> <img v-if="goodsInfo.image_middle" :src="goodsInfo.image_middle"
											 width="100%" />
											<i v-else class="el-icon-plus"></i>
										</el-upload>
									</el-form-item>
								</el-col>
								<el-col :span="18">
									<el-form-item label="副图(最多四张):" prop="">
										<el-upload class="cannot-add-picture" disabled action="fakeaction" list-type="picture-card" :file-list="vice_middle"
										 multiple :limit="4" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
											<i class="el-icon-plus"></i>
										</el-upload>
										<el-dialog :visible.sync="dialogVisible" width="800px" center :modal-append-to-body="false">
											<img width="100%" :src="dialogImageUrl" alt="" />
										</el-dialog>
									</el-form-item>
								</el-col>
								<el-col :span="6">
									<el-form-item label="视频:" prop="" class="video">
										<video-player style="width: 100%;" v-if="goodsInfo.video" id="video" ref="videoPlayer"
										 class="vjs-custom-skin" :playsinline="true" :options="playerOptions" />
									</el-form-item>
								</el-col>
								<el-col :span="6">
									<el-form-item label="视频封面图:" prop="" class="main-image" v-if="goodsInfo.cover_img">
										<el-upload disabled ref="upload" action="fakeaction"
										 multipleaccept="image/*" :show-file-list="false"> <img v-if="goodsInfo.cover_img" :src="goodsInfo.cover_img"
											style="width:100%;height:100%" />
											<i v-else class="el-icon-plus"></i>
										</el-upload>
									</el-form-item>
								</el-col>
								<el-col :span="6">
									<el-form-item label="活动主图:" prop="" v-if="goodsInfo.activity_image">
										<el-upload disabled ref="upload" action="fakeaction" :http-request=" function(res) { return upload(res); } "
										 multipleaccept="image/*" :show-file-list="false"> <img v-if="goodsInfo.activity_image" :src="goodsInfo.activity_image"
											style="width:100%;height:100%" />
											<i v-else class="el-icon-plus"></i>
										</el-upload>
									</el-form-item>
								</el-col>
								<el-col :span="12">
									<el-form-item label="实物图:" prop="" v-if="goodsInfo.shot_img">
										<el-upload class="cannot-add-picture" disabled action="fakeaction" list-type="picture-card" 
										:file-list="shot_img" multiple :limit="shot_img.length" :on-preview="handlePictureCardPreview" :on-remove="handleRemove">
											<i class="el-icon-plus"></i>
										</el-upload>
										<el-dialog :visible.sync="dialogVisible" width="800px" center :modal-append-to-body="false">
											<img width="100%" :src="dialogImageUrl" alt="" />
										</el-dialog>
									</el-form-item>
								</el-col>
							</el-row>
						</div>
						<p class="title" style="font-size: 20px;">产品详情图</p>
						<div class="detail-image">
							<el-image style="width: 900px;" v-for="(item,index) in img_info" :src="item" :preview-src-list="img_info" :key="index">
							</el-image>
						</div>
					</div>
				</div>
			</el-form>
		</el-card>

		<!-- 价格标签弹框 -->
		<el-dialog title="价格标签" :visible.sync="showDialog" center :modal-append-to-body="false" width="710px">
			<div class="price-tag" ref="imageWrapper" v-if="dataURL == ''">
				<div class="price-tag-top">
					<div class="top-left">
						<img :src="poster.store_logo">
						<p class="price">¥{{poster.retail_price}}</p>
						<p class="sku-sn">{{poster.sku_sn}}</p>
					</div>
					<div class="top-right">
						<img :src="poster.image_middle">
					</div>
				</div>
				<div class="price-tag-bottom">
					<div class="bottom-left">
						<p>品名:{{poster.goods_name}}</p>
						<p>规格:{{poster.size}}</p>
						<p>材质:{{poster.lining}}</p>
						<p>产地:{{poster.lining_address}}</p>
					</div>
					<div class="bottom-right">
						<div class="qr-tips">
							<p>查看产品详情</p>
							<p>扫一扫</p>
						</div>
						<img :src="poster.qr_img">
					</div>
				</div>
			</div>
			<img v-else :src="dataURL">
			<span slot="footer" class="dialog-footer">
				<a v-if="!Imgloading" :href="dataURL" download="qrcode.png"><el-button>{{loadingText}}</el-button></a>
				<el-button v-else :loading="Imgloading">{{loadingText}}</el-button>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import {
		platformList,
		packList
	} from '@/assets/api/JSON'
	import ImgPopover from '@/components/ImgPopover';
	import html2canvas from "html2canvas"
	import sonMixin from '@/utils/sonMixin';
	import purchase from './components/purchase.vue'
	export default {
		mixins:[sonMixin],
		props: ['source', 'goods_id', 'goods_sn'],
		components: {
			ImgPopover
		},
		data() {
			return {
				loadingText:'生成中',
				Imgloading: false,
				dataURL: '',
				showDialog: false,
				admin_type: localStorage.getItem('admin_type'),
				admin_id: localStorage.getItem('admin_id'),
				disabled: false,
				type: '',
				value: '',
				vice_middle: [],
				shot_img:[],
				img_info: [],
				dialogImageUrl: '',
				dialogVisible: false,
				goodsInfo: '',
				goodsRules: {

				},
				playerOptions: {
					playbackRates: [0.7, 1.0, 1.5, 2.0], //播放速度
					autoplay: false, // 如果true,浏览器准备好时开始回放。
					preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
					language: 'zh-CN',
					aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
					fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
					sources: [{
						type: 'video/mp4',
						src: ''
					}],
					hls: true,
					poster: '', // 你的封面地址
					width: '500px', // 播放器宽度
					notSupportedMessage: '此视频暂无法播放，请稍后再试'
				},
				StyleList: [], // 风格
				SpaceList: [], // 空间
				TextureList: [], // 材质
				ClassList: [], // 品类
				poster: {
					store_logo: '',
					image_middle: '',
					qr_img: '',
					goods_name: '',
					sku_sn: '',
					retail_price: '',
					lining: '',
					size: '',
					lining_address: '',
				},
				platformList:platformList,
				packList,
			};
		},
		methods: {
			purchaseF(row){
				this.$layer.iframe({
					title: '申请采购',
					maxmin: true,
					area: ['680px', '60%'],
					content: {
						content: purchase, //传递的组件对象
						parent: this, //当前的vue对象
						data: {
							goodsInfo: row,
							goods_sn: this.goodsInfo.goods_sn,
							goods_id: this.goodsInfo.goods_id,
						} //props
					}
				});
			},
			init() {
				// type 1 详情 2添加 2编辑
				this.type = this.$route.query.type
				let data = {}
				if (this.goods_id) {
					data.goods_id = this.goods_id
				} else if (this.$route.query.id) {
					data.goods_id = this.$route.query.id
				} else {
					data.goods_sn = this.goods_sn
				}

				if(this.admin_id==3){
					data.factory_sn = localStorage.getItem('factory_sn')
				}

				this.$http(this.$ApiList.GoodsInfo, data).then(res => {
					this.goodsInfo = res.datas;
					this.goodsInfo.stock = 999
					this.goodsInfo.is_sale = String(this.goodsInfo.is_sale)
					this.goodsInfo.parameter.install_id = String(this.goodsInfo.parameter.install_id)
					this.goodsInfo.parameter.filler_id = String(this.goodsInfo.parameter.filler_id)
					this.goodsInfo.parameter.craft_id = String(this.goodsInfo.parameter.craft_id)
					this.goodsInfo.parameter.pack_id = String(this.goodsInfo.parameter.pack_id)
					this.goodsInfo.parameter.serve_id = String(this.goodsInfo.parameter.serve_id)
					this.goodsInfo.parameter.send_id = String(this.goodsInfo.parameter.send_id)
					this.goodsInfo.parameter.express_id = String(this.goodsInfo.parameter.express_id)
					for (let i in res.datas.vice_middle) {
						let item = {
							url: res.datas.vice_middle[i]
						};
						this.vice_middle.push(item);
					}
					for (let i in res.datas.shot_img){
						let item = {
							url:res.datas.shot_img[i]
						}
						this.shot_img.push(item)
					}
					this.img_info = res.datas.img_info
					this.$nextTick(() => {
						this.playerOptions.sources[0].src = this.goodsInfo.video;
					});
				});
			},
			getClassify() {
				// 风格
				this.$http(this.$ApiList.StyleList).then(res => {
					this.StyleList = res.datas;
				});
				// 空间
				this.$http(this.$ApiList.SpaceList).then(res => {
					this.SpaceList = res.datas;
				});
				// 材质
				this.$http(this.$ApiList.TextureList).then(res => {
					this.TextureList = res.datas;
				});
				let data = {
					store_id: localStorage.getItem('shop_id')
				};
				// 品类
				this.$http(this.$ApiList.ClassList, data).then(res => {
					this.ClassList = res.datas;
				});
			},
			handleRemove(file, fileList) {
				for (let i in this.vice_middle) {
					if (this.vice_middle[i].uid == file.uid) {
						delete this.vice_middle[i];
					}
				}
			},
			handlePictureCardPreview(file) {
				this.dialogImageUrl = file.url;
				this.dialogVisible = true;
			},
			// 图片上传
			upload(params) {

			},
			remove(file, fileList) {
				console.log(file, fileList);
			},
			handlePreview(file) {
				console.log(file);
			},
			// 添加评论
			addComment(goodsId, sku_id) {
				this.$router.push({
					path: '/add_goods_comment',
					query: {
						type: 1,
						id: goodsId,
						skuid: sku_id
					}
				});
			},
			addCart(goods_id, sku_id) {
				let data = {
					type: 1,
					sku_id: sku_id,
					num: 1,
					goods_id: goods_id,
					store_id: this.goodsInfo.store_id,
					client: 4,
					space_ids: 0,
					is_all: 1,
				}
				this.$http(this.$ApiList.AddStoreGoodsCart, data).then(res => {
					this.$layer.msg('加入购物车成功');
				});
			},
			priceTag(item) {
				this.loadingText = '生成中'
				this.Imgloading = true
				this.dataURL = ''
				this.poster = {
					store_logo: this.goodsInfo.store_logo,
					image_middle: item.img,
					goods_name: this.goodsInfo.goods_name,
					sku_sn: item.sku_sn,
					retail_price: item.coefficient_price,
					lining: item.lining,
					size: item.size,
					lining_address: this.goodsInfo.lining_address
				}
				let data = {
					goods_id: item.goods_id,
				}

				this.$http(this.$ApiList.appCreateGoodsQr, data).then(res => {
					this.poster.qr_img = res.datas
					
					this.showDialog = true
					setTimeout(() => {
						html2canvas(this.$refs.imageWrapper, {
							useCORS: true,
							backgroundColor: null,
						}).then(canvas => {
							this.dataURL = canvas.toDataURL("image/png");
							this.$message({
								message: '图片生成成功',
								type: 'success'
							});
							this.Imgloading = false
							this.loadingText = '点击下载'
						});
					}, 500)
				});
			},
			changPrice(data){
				console.log(data)
				this.$prompt('请输入零售价', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					inputValue: data.retail_price,
					beforeClose: (action, instance, done) => {
						console.log(action, instance)
						if(action==='cancel'){
							done()
							return
						}else if(action==='confirm'){
							let obj = {
								goods_id: data.goods_id,
								sku_id: data.sku_id,
								edit_price: instance.inputValue
							}
							this.$http(this.$ptApiList.MerchantEditGoodsPrice,obj).then(res => {
								this.$layer.msg('修改成功')
								this.init()
								done()
							})
						}
					}
				}).then(({ value }) => {
					
				}).catch(() => { });
			}
		},
		created() {
			this.init();
			this.getClassify();
		}
	};
</script>

<style lang="scss">
	.vl-notify{
		z-index: 10000;
	}
	.goods-details,
	.model-view {

		.image-content .el-upload {
			background-color: #fbfdff;
			border: 1px dashed #c0ccda;
			border-radius: 6px;
			box-sizing: border-box;
			width: 148px;
			height: 148px;
			cursor: pointer;
			line-height: 146px;
			vertical-align: top;
		}

		.image-content .el-upload .el-icon-plus {
			font-size: 28px;
			color: #8c939d;
		}

		.cannot-add-picture .el-upload--picture-card {
			display: none;
		}

		.main-image .el-form-item__label,
		.video .el-form-item__label {
			width: 120px !important;
		}

		.main-image .el-form-item__content,
		.video .el-form-item__content {
			margin-left: 0 !important;
		}

		.el-input__inner {
			padding: 0 10px;
		}

		.price-tag {
			width: 660px;
			height: 420px;
			padding: 32px 32px;
			background: url(https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/static/images/other/2020-09-09/20200909/589be527afd910bb0385071616dc4de8.png) no-repeat;
			background-size: 100% 100%;

			.price-tag-top {
				display: flex;

				.top-left {
					flex: 1;

					img {
						width: 100px;
					}

					.price {
						margin-top: 40px;
						font-size: 30px;
						color: red;
						font-weight: bold;
					}

					.sku-sn {
						font-weight: bold;
						font-size: 20px;
					}
				}

				.top-right {
					margin-top: 30px;
					flex: 1;
					display: flex;
					flex-direction: row-reverse;

					img {
						display: block;
						width: 150px;
						height: 150px;
					}
				}
			}

			.price-tag-bottom {
				display: flex;
				margin-top: 30px;

				.bottom-left {
					width: 360px;
					p {
						margin-top: 4px;
						font-size: 18px;
						// font-weight: bold;
					}
				}

				.bottom-right {
					position: relative;
					flex: 1;
					display: flex;
					flex-direction: row-reverse;

					.qr-tips {
						position: absolute;
						display: flex;
						left: 48px;
						top: 10px;

						p {
							width: 20px;
							font-size: 12px;
							// font-weight: bold;
						}
					}

					img {
						display: block;
						width: 150px;
						height: 150px;
					}
				}
			}


		}

		.detail-image {
			width: 902px;
			border: 1px solid #E3E3E3;
		}
		.el-upload-list{
			display: flex;
			flex-wrap: wrap;
		}
	}
	.model-view{
		.image-content{
			.el-form-item__content{
				display: flex;
				flex-wrap: wrap;
			}
			.el-upload{
				margin-right: 20px;
			}
		}
	}
</style>
